<template>
  <div class="dialog">
    <el-dialog
      v-model="show"
      :title="isCreate ? dialogConfig.header.newTitle : dialogConfig.header.editTitle"
      width="30%"
      center
      @close="cancelBtnClick"
    >
      <el-form ref="formRef" :model="dialogForm" label-width="120px" size="large">
        <template v-for="item in dialogConfig.dialogFormList" :key="item.prop">
          <el-col :span="item.span">
            <el-form-item :label="item.label" :prop="item.prop">
              <template v-if="item.type === 'input'">
                <el-input v-model="dialogForm[item.prop]" :placeholder="item.placeholder" />
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select v-model="dialogForm[item.prop]" :placeholder="item.placeholder">
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'date-picker'">
                <el-date-picker
                  v-model="dialogForm[item.prop]"
                  :type="item.dataType"
                  :range-separator="item.linkMark"
                  :start-placeholder="item.linkMark"
                  :end-placeholder="item.endText"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBtnClick">取消</el-button>
          <el-button type="primary" @click="ConfirmBtnClick">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
interface Iprops {
  dialogConfig: {
    pageName: string
    header: {
      newTitle: string
      editTitle: string
    }
    dialogFormList: any[]
  }
  centerDialogVisible: boolean // dialog展示控制
  isCreate: boolean // 是否新增
}
const props = defineProps<Iprops>()

const formRef = ref<InstanceType<typeof ElForm>>()

// 搜索表单
const dialogForm = ref(
  props.dialogConfig.dialogFormList.reduce((obj, item) => {
    obj[item.prop] = item.initialVal ?? '' // 初始值
    console.log('初始值', item.initialVal)

    return obj
  }, {}),
)

const resetForm = (newData: any) => {
  Object.keys(newData).forEach((key) => {
    dialogForm.value[key] = newData[key]
  })
}

const show = ref(true)
watch(
  () => props.centerDialogVisible,
  (newVal) => {
    show.value = newVal
  },
  {
    immediate: true,
  },
)
const emits = defineEmits(['cancel'])

// 取消按钮
function cancelBtnClick() {
  emits('cancel')
}

// 确认按钮
function ConfirmBtnClick() {
  if (props.isCreate) {
    console.log('创建')
  } else {
    console.log('编辑')
  }
  emits('cancel')
  // To do 提交表单
}

defineExpose({
  dialogForm,
  resetForm,
  formRef,
})
</script>

<style scoped lang="less">
.dialog {
  color: red;
}
</style>
